<template>
  <!-- 整体布局容器 -->
  <el-container>
    <!-- 左侧侧边栏 -->
    <el-aside :style="{ width: isCollapse ? 'auto' : '200px' }">
      <!-- 左侧菜单区域 -->
      <navbar :menus="menus" :collapse="isCollapse"></navbar>
    </el-aside>
    <!-- 右侧区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <!-- 头部的logo及标题 -->
        <div class="logoAndTitle" @click="handleCollapse">
          <!-- logo，同时页数收缩框图标 -->
          <img
            src="../assets/images/logo.png"
            height="32px"
            width="32px"
            alt=""
          />
          <!-- 标题 -->
          <h1>电商后台管理</h1>
        </div>
        <!-- 下拉菜单 -->
        <div class="aside_text">
          <!-- 登录者头像 -->
          <el-avatar :src="imgStr"></el-avatar>
          <!-- 登录者下拉选项 -->
          <el-dropdown>
            <i
              class="
                el-icon-arrow-down
                el-icon--right
                el-icon-caret-bottom
                istyle
              "
            ></i>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="myInfo"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item @click.native="changePassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item divided @click.native="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 右侧内容主体区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 修改密码的对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 修改密码的内容主体区域 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="uname" disabled></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="editForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="editForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="editForm.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserPwd">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
// 导入路由
import routes from '../router/routes'
// 导入菜单
import Navbar from '../components/Navbar'
export default {
  // 组件
  components: {
    Navbar
  },
  // 数据
  data () {
    return {
      // 获取当前登录用户的id
      uId: window.sessionStorage.getItem('uId'),
      // 是否水平折叠收起菜单，默认展开
      isCollapse: false,
      // 登录者头像
      imgStr: '',
      // 修改密码对话框的显示与隐藏
      editDialogVisible: false,
      // 获取sessionStorage中的登录者用户名
      uname: window.sessionStorage.getItem('username'),
      // 修改密码表单的数据绑定对象
      editForm: {
        // 旧密码
        oldPassword: '',
        // 新密码
        newPassword: '',
        // 确认密码
        confirmPassword: ''
      },
      // 修改密码对话框的验证规则对象
      editFormRules: {
        // 旧密码
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        // 新密码
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        // 确认密码
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 钩子
  created () {
    // 获取用户个人信息，用于获取头像
    this.getUserInfo()
  },
  // 计算属性
  computed: {
    // 处理路由路径
    menus () {
      let arr = this.resolve(routes)
      return arr
    }
  },
  // 方法
  methods: {
    // 路由相关
    resolve (arr, parentPath = '') {
      let newArr = []
      // 遍历数组中的元素
      arr.forEach((route) => {
        let obj = Object.assign({}, route);
        // 当级路径存在时，并且最后一位不为/，则后面添加 /
        parentPath =
          parentPath && parentPath.lastIndexOf('/') !== parentPath.length - 1
            ? parentPath + '/'
            : parentPath
        // 总是加上父级路径
        obj.path = parentPath + obj.path
        // 第二步，判断有没有children属性，如有，那么需要处理，如果没有直接push到一个新的数组中
        if (obj.children && obj.children.length > 0) {
          obj.children = this.resolve(obj.children, obj.path)
        }
        // 如果当前元路由信息有hidden，那么把子节点提升上来
        if (obj.meta.hidden && obj.meta) {
          if (obj.children && obj.children.length > 0) {
            obj.children.forEach((item) => {
              let tmp = Object.assign({}, item)
              newArr.push(tmp)
            })
          }
        } else {
          newArr.push(obj)
        }
      })
      return newArr
    },
    // 切换收缩框展开与合并
    handleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 退出登录
    logout () {
      // 清空sessionStorage
      window.sessionStorage.clear()
      // 编程式导航跳转到登录页
      this.$router.push('/login')
    },
    // 修改密码
    changePassword () {
      // 显示修改密码对话框
      this.editDialogVisible = true
    },
    // 监听修改密码对话框的关闭事件
    editDialogClosed () {
      // 重置表单验证
      this.$refs.editFormRef.resetFields()
    },
    // 确认修改密码
    editUserPwd () {
      // 对表单进行预验证
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          // 没有填写相应的值，初步预验证不通过
          this.$message.error('请按提示要求填写相应的内容！')
        } else if (this.editForm.newPassword !== this.editForm.confirmPassword) {
          // 两次密码不一致
          this.$message.error('两次密码不一致！')
        } else {
          // 用户填写了所有的值，并且两次密码一致，初步预验证通过
          // 从sessionStorage中获取用户Id
          const uId = window.sessionStorage.getItem('uId')
          // 根据用户Id向服务器发送请求，获取该用户的信息
          const { data: res } = await this.$http.get('users/id/' + uId)
          if (res.meta.status !== 200) {
            // 根据Id查找的用户不存在
            this.$message.error('奇怪，该用户不存在(⊙o⊙)？')
          } else {
            // 用户存在
            // 获取该用户的密码
            const oldPassword = res.data.password
            // 判断数据库中的旧密码是否与用户输入的旧密码一致
            if (oldPassword !== this.editForm.oldPassword) {
              // 用户输入的旧密码与数据库中的旧密码不一致
              this.$message.error('旧密码错误！')
            } else {
              // 用户输入的旧密码与数据库中的旧密码一致
              // 往数据库中更新密码
              const { data: res } = await this.$http.put('users/' + uId, {
                // 2 代表修改用户密码
                modType: 2,
                password: this.editForm.confirmPassword
              })
              if (res.meta.status !== 200) {
                // 密码修改失败
                this.$message.error('密码修改失败，请联系管理员处理！')
              } else {
                // 密码修改成功
                // 隐藏修改密码的对话框
                this.editDialogVisible = false
                // 清空sessionStorage
                window.sessionStorage.clear()
                // 跳转到登录页
                this.$router.push('/login')
                // 提示修改成功的信息
                this.$message.success('恭喜，密码修改成功，请重新登录！')
              }
            }
          }
        }
      })
    },
    // 获取用户个人信息资料
    async getUserInfo () {
      // 往数据库中发送请求
      const { data: res } = await this.$http.get('users/id/' + this.uId)
      if (res.meta.status !== 200) {
        // 用户个人信息资料获取失败
        this.$message.error('用户个人信息资料获取失败！')
      } else {
        // 用户个人信息资料获取成功
        // 头像赋值
        this.imgStr = `https://api.h1234.top/files/${res.data.avatarId}`
      }
    },
    // 个人中心
    myInfo () {
      // 编程式导航跳转至个人中心页面
      this.$router.push('/myInfo')
    }
  }
}
</script>

<style scoped>
/* 头部区域 */
.el-header {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 侧边栏 */
.el-aside {
  background-color: #f6f6f6;
}

/* 取消菜单展开后右侧突出的边框线 */
.el-menu {
  border-right: none;
}

/* 右侧内容区域 */
.el-main {
  background-color: #ffffff;
  min-height: calc(100vh - 120px);
}

/* 底部区域 */
.el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

/* 后台网站标题 */
h1 {
  /* 网站标题距离logo 10px */
  margin-left: 10px;
  /* 字体大小 */
  font-size: 15px;
  /* 字体占位宽度 */
  width: 8.5rem;
}
/* 头部的logo及标题 */
.logoAndTitle {
  display: flex;
  align-items: center;
  /* 按钮变小手手 */
  cursor: pointer;
}
</style>
